<script setup lang="ts">
import { ref,onMounted,computed } from 'vue'
import anime from 'animejs'
import { useWindowSize } from '@vueuse/core'

const props = defineProps({
  packetWidth:{
    type:Number,
    default:100
  },
  packetHeight:{
    type:Number,
    default:200
  },
  packetTotal:{
    type:Number,
    default:50
  },
})
const { width, height } = useWindowSize()
const w=computed(() => width.value*props.packetWidth/750)
const h=computed(() => width.value*props.packetHeight/750)
const numX=computed(() => Math.floor(width.value/w.value/2))
const numY=computed(() => Math.floor(height.value/h.value/2))
const timeline = anime.timeline({
  duration:5000,
  easing:'linear'
});
onMounted(() =>{
  anime.set('.packet-wrapper',{
    translateX:function(el, i, l){
      return (i%numX.value)*w.value*2+anime.random(w.value/2,w.value);
    },
    translateY:function(el, i, l){
      return Math.floor(i/numX.value)*(-2*h.value)+anime.random(h.value/2,h.value);
    },
    rotateZ:function(el, i, l){
      return anime.random(-45,45);
    },
    scale:function(el, i, l){
      return anime.random(7,12)/10;
    }
  })
  anime({
    targets:'.packet-wrapper',
    translateY:function(el, i, l){
      return height.value+h.value*2;
    },
    delay:function(el, i, l){
      return 0;
    },
    duration:function(el, i, l){
      return 5000*(1+Math.floor(i/numX.value)/numY.value);
    },
    easing:'linear'
  })
})
</script>

<template>
  <div class="packet-container"
    w:w="screen"
    w:h="screen"
    w:pos="fixed top-0 left-0"
  >
    <div class="packet-wrapper" v-for="(item,idx) in packetTotal" :key="idx" :style="{width:w+'px',height:h+'px'}"
      w:pos="absolute top-0 left-0"
    >
    
    </div>
  </div>
</template>

<style lang="scss" scoped>
.packet-wrapper{
  background-color: bisque;
}
</style>